<template>
  <header
    :class="[onTop ? '' : 'leave-top', isDark ? 'theme-dark' : 'theme-day']"
  >
    <!-- LOGO, prop为 logoText, 传html语言字符串 -->
    <div class="logo">{{ logoText }}</div>
    <div class="right">
      <ul>
        <!-- 搜索按钮, prop showSearch 布尔, 自定义点击事件 searchClick() -->
        <li v-show="showSearch" @click="$emit('searchClick')">
          <a route-path="" style="padding-top: 3px"
            ><i class="el-icon-search" style="font-size: 24px"></i
          ></a>
        </li>
        <!-- 跳转导航列表, prop为 navLi, 传数组 -->
        <li
          v-for="li in navLi"
          :key="li.path"
          @click="handleNavSelect(li.path)"
        >
          <a :class="current == li.path ? 'current' : ''">{{ li.name }}</a>
        </li>
        <!-- 工具网站列表  -->
        <li v-show="tools.show">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <a route-path=""
                >工具<i class="el-icon-arrow-down el-icon--right"></i
              ></a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="tool in tools.tools"
                :key="tool.id"
                :command="tool.link"
                >{{ tool.name }} <i class="el-icon-link"></i
              ></el-dropdown-item>
              <!-- <el-dropdown-item divided command="d">蚵仔煎</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      <!-- 背景音乐 -->
      <input
        v-show="showMusic"
        type="checkbox"
        v-model="isPlay"
        class="bg-music"
        @change="playAudio"
      />
      <!-- <audio autoplay loop src="bgMusic.mp3" ref="audioRef"></audio> -->
      <audio loop src="bgMusic.mp3" ref="audioRef"></audio>
      <!-- 昼夜主题切换, prop为showThemeChange 布尔, 自定义事件为 changeTheme(isDark) -->
      <input
        v-show="showThemeChange"
        type="checkbox"
        v-model="isDark"
        class="theme-color"
        @change="$emit('changeTheme', isDark)"
      />
      <!-- 用户登录, prop为login, 事件为user(id) -->
      <div class="touxiang" v-show="login.show">
        <el-dropdown @command="handleLogin">
          <span class="el-dropdown-link">
            <a route-path=""><el-avatar :src="login.img"></el-avatar></a>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :command="li.id"
              v-for="li in login.describe"
              :key="li.id"
            >
              {{ li.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    // isDark: { type: Boolean, default: false },
    // current: { type: Number, default: 1 },
    logoText: { type: String, default: '这是Logo' },
    showSearch: {
      type: Boolean,
      default: true,
    },
    navLi: {
      type: Array,
      default: function () {
        return [
          { name: '首页', path: '/home' },
          { name: '分类', path: '/category' },
          { name: '归档', path: '/file' },
          { name: '留言', path: '/message' },
          { name: '关于', path: '/brief' },
          { name: '友站', path: '/friend' },
        ]
      },
    },
    tools: {
      type: Object,
      default: function () {
        return {
          show: true,
          tools: [
            {
              id: 1,
              link: 'https://gitee.com/jade370/blogs',
              name: '下载源码',
            },
            { id: 2, link: 'https://www.yuque.com/dashboard', name: '语雀' },
            { id: 3, link: 'https://cloud.tencent.com', name: '腾讯云' },
            { id: 4, link: 'https://www.zhihu.com', name: '知乎' },
            {
              id: 5,
              link: 'https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API',
              name: 'MDN',
            },
            { id: 6, link: 'https://v2.cn.vuejs.org/v2/guide/', name: 'VUE' },
            {
              id: 7,
              link: 'https://element.eleme.cn/#/zh-CN',
              name: 'elementUI',
            },
            { id: 8, link: 'https://www.iconfont.cn/', name: '图标库' },
          ],
        }
      },
    },
    showMusic: {
      type: Boolean,
      default: true,
    },
    showThemeChange: {
      type: Boolean,
      default: true,
    },
    login: {
      type: Object,
      default: function () {
        return {
          show: true,
          describe: [
            { id: '1', name: '登录' },
            { id: '2', name: '退出' },
          ],
          img: 'tx.gif',
        }
      },
    },
  },
  data() {
    return {
      isDark: false,
      isPlay: false,
      current: 1,
      onTop: true,
      headerClass: {
        'theme-dark': this.isDark,
        'theme-day': !this.isDark,
        'leave-top': !this.onTop,
      },
    }
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll, true)
    // 进站时获取path, 为对应nav选项设置高亮样式
    this.current = this.$route.path
    // 背景音乐音量
    let recordAudio = this.$refs.audioRef // 获取audio元素
    recordAudio.volume = 0.3 // 设置音量50%
  },
  destroyed() {
    //离开这个界面后，清除监听事件
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    //滚动事件
    handleScroll() {
      //判断滚动条是否位于顶部, 是返回true, 否返回false
      if (
        (document.documentElement.scrollTop || document.body.scrollTop) <= 0
      ) {
        this.onTop = true
      } else {
        this.onTop = false
      }
    },
    // 切换导航按钮
    handleNavSelect(keyPath) {
      this.current = keyPath
      // 通过编程式导航, 跳转到 /admin/user/add 路由
      // 写法1: /admin/user/add   /开头为绝对
      // 写法2: user/add   无/为相对
      // 导航到/add组件
      // console.log(this.$route) // 保存当前的URL
      if (this.$route.path != keyPath) {
        this.$router.push(keyPath)
      }
    },
    // 工具的新标签页跳转
    handleCommand(command) {
      // location.replace(command)
      window.open(command, '_blank')
    },
    // 播放暂停控制
    playAudio() {
      // let recordAudio = this.$refs.audioRef // 获取audio元素
      // // if (recordAudio.paused) {
      // if (this.isPlay) {
      //   recordAudio.play()
      // } else {
      //   recordAudio.pause()
      // }
    },
    // 登录下拉框的点击事件
    handleLogin(command) {
      this.$emit('user', command)
    },
    // 改变主题色
    changeTheme() {
      this.$emit(this.isDark)
    },
  },
  watch: {
    isPlay() {
      let recordAudio = this.$refs.audioRef // 获取audio元素
      // if (recordAudio.paused) {
      if (this.isPlay) {
        recordAudio.play()
      } else {
        recordAudio.pause()
      }
    },
  },
}
</script>

<style lang="stylus" scope>
@import '~styles/theme.styl';
@import '~styles/mixins.styl';

/* 使用>>>深度选择器, 穿透属性 */
.el-dropdown-menu >>> .el-dropdown-menu__item
  &:hover
    color: #ff638a;
header
  /* 昼主题 */
  &.theme-day
    // background: $day-bg
    color: $day-font
    &.leave-top
      background: rgba(255, 255, 255, .75);
      // box-shadow: 0 1px 40px -8px rgb(255 255 255 / 40%);
    &:hover
      background-color: rgba(255, 255, 255, .9);
  /* 夜主题 */
  &.theme-dark
    // background: $dark-bg !important /* 继承的优先级也高 */
    color: $dark-font !important
    &.leave-top
      background: rgba(0,0,0, .5);
      // box-shadow: 0 1px 40px -8px rgb(255 255 255 / 40%);
    &:hover
      background: rgba(0,0,0, .7);
  display flex
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 2.5%;
  right: 2.5%;
  top: 2.5%;
  z-index: 999;
  height: 75px;
  text-align center
  border-radius: 15px !important;
  color: #505050
  transition: all 1s ease !important;
  box-sizing: border-box;
  padding 0 20px;
  user-select: none;
  /* 网站LOGO */
  .logo
    // width: 100px
  .right
    display: flex
    align-items: center;
  /* 背景音乐 */
  .bg-music
    width: 22px;
    height: 22px;
    margin-right 20px
    clearDefault()
    &::after
      content: url('~assets/images/music.svg');
      cursor: url('~assets/images/hover.png'), auto;
    &:checked
      animation: rotating 3s infinite linear;
  /* 白昼主题 */
  .theme-color
    width: 24px;
    height: 24px;
    margin-right 20px
    clearDefault()
    &::after
      content: url('~assets/images/day.svg');
      cursor: url('~assets/images/hover.png'), auto;
    &:checked::after
      content: url('~assets/images/night.svg');
  /* 头像 */
  .touxiang
    &:hover
      cursor: url('~assets/images/hover.png'), auto;
  ul
    display flex
    margin-right 30px
    a
      display inline-block
      height 60px
      line-height 60px
      padding 0 10px
      margin 0 5px
      text-align center
      transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
      box-sizing: border-box
      &:hover
        cursor: url('~assets/images/hover.png'), auto;
        color: #ff638a;
        border-bottom: 4px solid #ff638a
      &.current
        color: #ff638a;
        border-bottom: 4px solid #ff638a

@keyframes rotating
  0%
    // transform: rotate(180deg);
  100%
    transform: rotate(360deg);
</style>
